<section id="jwk-list" class="ml-24 mr-24 pb-20">
	<hl-page-header title="办公租赁">
		<hl-button type="outline" @on-click="toCreateRegionPage" v-if="power.indexOf('c334') > -1">区域配置</hl-button>
		<hl-button type="outline" @on-click="toCreateMatchingPage"  v-if="power.indexOf('c335') > -1">配套设施</hl-button>
		<hl-button type="outline" @on-click="toCreateParkPage"  v-if="power.indexOf('c336') > -1">园区配置</hl-button>
		<hl-button type="outline" @on-click="toCreateWorkPage"  v-if="power.indexOf('c337') > -1">新建办公室</hl-button>
	</hl-page-header>

	<div class="clearfix mt-10 relative">
		<div class="pr-15 pull-left">
			<p class="color-cfcfcf">信息检索</p>
			<div class="global_search">
				<span class="icon-Gm-search"></span>
				<input autocomplete="off" type="text" class="global_ipt_text" placeholder="房源" style="width:180px"  v-model="keyword"/>
			</div>
		</div>
		<div class="pr-15 pull-left">
			<p class="color-cfcfcf">园区</p>
			<div class="div">
				<hl-autoComplete :data="parkData" width="155" :fetch-suggestions="getParkData" v-model="parkInfo.name" type="default"
					@on-change="selectParkId" placeholder="请输入"></hl-autoComplete>
			</div>
		</div>
		<div class="pr-15 pull-left">
			<p class="color-cfcfcf">区域</p>
			<div class="div">
				<hl-select :data="cityData" width="140" class="mr-5" v-model="city_code" @on-change="selectCityCode">
				</hl-select>
				<hl-select :data="setCountyData" width="140" v-model="district_code"></hl-select>
			</div>
		</div>
		<div class="pr-15 pull-left" v-if="isExtenseFlag">
			<p class="color-cfcfcf">面积</p>
			<div class="div">
				<hl-select :data="acreage.list" width="140" class="mr-5" v-model="acreage.active"></hl-select>
			</div>
		</div>
		<div class="pull-left mt-10" style="width: 170px;" v-if="isExtenseFlag">
			<div class="pr-15 pull-left">
				<p class="color-cfcfcf">租金</p>
				<div class="div">
					<hl-select :data="rent.list" width="140" class="mr-5" v-model="rent.active"></hl-select>
				</div>
			</div>
		</div>
		<div class="pull-left" :style="{'margin-top': !isExtenseFlag ? '19px' : '29px'}">
			<hl-button @on-click="getData">查询</hl-button>
			<hl-button @on-click="reset">重置</hl-button>
		</div>
		<div class="global_open_sign" @click="openSearch" style="margin-top: 10px;">
			<span v-if="!isExtenseFlag">更多筛选项</span>
			<span v-if="isExtenseFlag">收起筛选项</span>
		</div>
	</div>

	<div class="dy-flex mt-10 hl-scroll-container global_table border global_table" ref="vs">
		<div style="width: 785px;">
			<vue-scroll :ops="ops" ref="scrollWrap" @handle-scroll="handleComplete">
				<div class="dy-flex config-table-title-wrap" style="width: 1250px;">
					<div class="dy-fx-1 config-table-title-item global_table_title">序</div>
					<div class="dy-fx-3 config-table-title-item global_table_title">房源</div>
					<div class="dy-fx-3 config-table-title-item global_table_title">园区</div>
					<div class="dy-fx-3 config-table-title-item global_table_title">区域</div>
					<div class="dy-fx-2 config-table-title-item global_table_title">面积(㎡)</div>
					<div class="dy-fx-3 config-table-title-item global_table_title">租金(元/㎡天)</div>
					<div class="dy-fx-3 config-table-title-item global_table_title">物业费(元/㎡/月)</div>
					<div class="dy-fx-3 config-table-title-item global_table_title cursor" @click="runkTime('CT')">
						<span>创建时间</span>
						<span
							:class="{'icon-Gm-sort-default': !columns || columns == 'LUT', 'icon-Gm-sort-ascending': orders == 'ASC' && columns == 'CT', 'icon-Gm-sort-descending': orders == 'DESC' && columns == 'CT'}">
							<span class="path1"></span><span class="path2"></span>
						</span>
					</div>
					<div class="dy-fx-3 config-table-title-item global_table_title cursor" @click="runkTime('LUT')">
						<span>最后更新时间</span>
						<span
							:class="{'icon-Gm-sort-default': !columns || columns == 'CT', 'icon-Gm-sort-ascending': orders == 'ASC' && columns == 'LUT', 'icon-Gm-sort-descending': orders == 'DESC' && columns == 'LUT'}">
							<span class="path1"></span><span class="path2"></span>
						</span>
					</div>
				</div>
				<div class="dy-flex line-height-40 text-center table-padding-4 global_table_item" style="width: 1250px;"
					v-for="(item,index) in dataList.bizRentOfficeList" @mouseenter="rowIndex = index" @mouseleave="rowIndex = null" :class="{hoverColor:rowIndex == index}">
					<div class="dy-fx-1 ">{{index+1}}</div>
					<div class="dy-fx-3 ellipsis-1">{{item.name}}</div>
					<div class="dy-fx-3 ellipsis-1">{{item.parkInfo.name}}</div>
					<div class="dy-fx-3 ellipsis-1">{{item.parkInfo.city + item.parkInfo.district}}</div>
					<div class="dy-fx-2 ellipsis-1">{{item.acreage}}</div>
					<div class="dy-fx-3 ellipsis-1">{{item.rentPrice}}</div>
					<div class="dy-fx-3 ellipsis-1">{{item.propertyFee}}</div>
					<div class="dy-fx-3 ellipsis-1">{{item.createTime | timestamp}}</div>
					<div class="dy-fx-3 ellipsis-1">{{item.updateTime | timestamp}}</div>
				</div>
			</vue-scroll>
		</div>
		<div class="border-l text-center line-height-40 dy-fx-1">
			<div class="border-b" style="background-color: #F0F2FF;color: #A5AAB7;line-height: 39px;">操作</div>
			<div></div>
			<div class="global_table_item" v-for="(item,index) in dataList.bizRentOfficeList" @mouseenter="rowIndex = index" @mouseleave="rowIndex = null" :class="{hoverColor:rowIndex == index}">
				<a href="javascript:;" @click="disableItem(item)">{{item.isValid == '1'?'停用':'启用'}}</a>
				<a href="javascript:;" @click="previewItem(item.id)">预览</a>
				<a href="javascript:;" @click="toEditWorkPage(item.id)">编辑</a>
				<a href="javascript:;" @click="delItem(item)">删除</a>
			</div>
		</div>
	</div>
	<div class="user-page ptb-10 clearfix">
		<div class="pull-left user-page-num">
			<span class="font-14">共<i>{{dataList.totalCount}}</i>条记录</span>
			<span>每页
				<hl-select :data="pages" v-model="pageCount" width="80" @on-change="getDateTime"></hl-select>
				条</span>
		</div>
		<div class="pull-right">
			<hl-pagination :total="dataList.totalPage" v-model="current" @change="turnPage"></hl-pagination>
		</div>
	</div>
</section>

<style type="text/css">
	.table-padding-4>div {
		padding: 0 4px;
	}

	.global_open_sign {
		bottom: 0
	}
	.hoverColor{
		background-color: #F0F0F7!important
	}
	.global_table_item a{
		margin-right: 5px;
	}
</style>

<script src="modules/jwk/scripts/jwk_list.js" charset="utf-8"></script>